<template>
  <div class="home h100">
    <header>标题</header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link  
      v-for="(item,index) in list"
      :key="index"
      :to="item.path"
      tag= "span"
      active-class="active"
      >
      {{item.title}}
      </router-link>

    </footer>
  </div>
</template>

<script>
export default {
    data() {
      return {
        list: []
      }
    },
}
</script>

<style>
.home {
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  line-height: 46px;
  font-size: 24px;
}
main {
  flex: 1;
}
footer {
  text-align: center;
  line-height: 46px;
  display: flex;
}
footer span {
  flex: 1;
}
</style>